<template>
  <div class="index">
    <mains :title="'首页'"></mains>
    <div class="indexBigBox">
      <!-- 五个列表 -->
      <fiveList></fiveList>
      <!-- echarts图表 -->
      <div class="eachartsBox">
        <indexEcharts></indexEcharts>
        <indexEcharts1></indexEcharts1>
      </div>
      <!-- 表格 -->
      <div class="table_box">
        <div class="table_one">
          <h3>实时挂号</h3>
          <table class="custom-table">
            <thead>
              <tr>
                <th>头像</th>
                <th>患者姓名</th>
                <th>患者手机号码</th>
                <th>挂号科室</th>
                <th>挂号费</th>
                <th>预约时间</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><img src="../assets/ncImg/1.png" alt="" /></td>
                <td>张三</td>
                <td>123456789</td>
                <td>心内科</td>
                <td>100</td>
                <td>2022-01-01 12:00:00</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="table_two">
          <!-- 热门科室表格 -->
          <div class="keshi">
            <h3>热门科室</h3>
            <table class="custom-table2">
              <thead>
                <tr>
                  <th>排名</th>
                  <th>科室</th>
                  <th>挂号量</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in hotDepartments" :key="index">
                  <td><div :class="['bjcolor', getRankColor(item.rank)]">{{ item.rank }}</div></td>
                  <td>{{ item.department }}</td>
                  <td>{{ item.registrationCount }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 热门医生表格 -->
          <div class="keshi">
            <h3>热门医生</h3>
            <table class="custom-table2">
              <thead>
                <tr>
                  <th>排名</th>
                  <th>患者姓名</th>
                  <th>挂号量</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in hotDoctors" :key="index">
                  <td><div :class="['bjcolor', getRankColor(item.rank)]">{{ item.rank }}</div></td>
                  <td>{{ item.doctorName }}</td>
                  <td>{{ item.registrationCount }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import mains from '@/components/main.vue'
import fiveList from '@/components/ncComponents/fiveList.vue'
import indexEcharts from '@/components/ncComponents/indexEcharts.vue'
import indexEcharts1 from '@/components/ncComponents/indexEcharts copy.vue'

// 热门科室数据
const hotDepartments = reactive([
  {
    rank: 1,
    department: '肾内科',
    registrationCount: 120,
  },
  {
    rank: 2,
    department: '眼科',
    registrationCount: 100,
  },
  {
    rank: 3,
    department: '心血管内科',
    registrationCount: 90,
  },
  {
    rank: 4,
    department: '发热门诊',
    registrationCount: 80,
  },
  {
    rank: 5,
    department: '心血管内科',
    registrationCount: 70,
  },
])
// 热门医生数据
const hotDoctors = reactive([
  {
    rank: 1,
    doctorName: '王明宇',
    registrationCount: 120,
  },
  {
    rank: 2,
    doctorName: '连然',
    registrationCount: 100,
  },
  {
    rank: 3,
    doctorName: '傅新',
    registrationCount: 90,
  },
  {
    rank: 4,
    doctorName: '李卓然',
    registrationCount: 80,
  },
  {
    rank: 5,
    doctorName: '吴鸣',
    registrationCount: 70,
  },
])

const getRankColor = (rank: number) => {
  if (rank === 1) {
    return 'red-rank'
  } else if (rank === 2) {
    return 'yellow-rank'
  } else if (rank === 3) {
    return 'green-rank'
  }
  return ''
}
</script>

<style scoped>
.bjcolor{
  background-color: #eee;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color:#fff;
  font-weight: 600;
}
.red-rank {
  /* 从左到右由深到浅的渐变红色 */
  background: linear-gradient(to right, rgb(234, 107, 107), #fff);

}
.yellow-rank {
  background: linear-gradient(to right, rgb(136, 210, 130), #fff);

}
.green-rank {
  background: linear-gradient(to right, rgb(231, 170, 48), #fff);
}
:root {
  --spacing: 12px;
}

.indexBigBox {
  display: grid;
  gap: var(--spacing);
  grid-template-columns: 1fr;
}

.eachartsBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
/* table{
  margin-top: 20px;
} */
.table_box {
  width: 100%;
 display: flex;
 justify-content: space-between;
}

.table_one,
.table_two {
  width: 49%;

  height: 300px;
  
  margin-left: 12px;
  margin-top: 20px;
}
.table_one{
    padding: 10px;
    height: 380px;
  background-color: #fff;
}

.table_two {
 display: flex;
 justify-content: space-between;
}

.keshi {
  padding:10px;
  width: 48%;
  height:380px;
  /* margin-top: -10px; */
  background-color: #fff;
}
table{
  margin-top: 15px;
}
.custom-table thead th,.custom-table2 thead th{
  background-color: #fff;
}
.custom-table,
.custom-table2 {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

.custom-table th,
.custom-table td,
.custom-table2 th,
.custom-table2 td {
  padding: 12px 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.custom-table th,
.custom-table2 th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.custom-table tr:hover,
.custom-table2 tr:hover {
  background-color: #f5f5f5;
}

.custom-table img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .table_box,
  .table_two {
    grid-template-columns: 1fr;
  }
}
</style>